<template>
  <div id="app">
    <router-view />
    <add-page-dialog
      :key="dialogKey"
      :field="field"
      :pageVisible.sync="pageVisible"
      :designer="designer"
      @pageClosed="pageClosed"
    >
    </add-page-dialog>
  </div>
</template>

<script>
import { listByApplication,getAppInfo } from "@/api/common";
import ComponentPage from "@/views/ComponentPage.vue";
import { EventBus } from "@/components/javaScript/EventBus";
import AddPageDialog from "@/components/form-designer/config-common/add-page-dialog.vue";

export default {
  name: "app",
  components: { ComponentPage, AddPageDialog },

  data() {
    return {
      dialogKey: 1,
    };
  },
  methods: {
    getAllPage() {
      localStorage.setItem("appId", "1");
      listByApplication({ applicationId: "1" }).then((res) => {
        let route = [];
        res.data.data.forEach((i) => {
          route.push({
            path: i.nameEn,
            name: i.nameCn,
            component: ComponentPage,
            meta: {
              pageId: i.oid,
            },
          });
        });

        let { routes } = this.$router.options;
        let routeData = routes.find((r) => r.path === "/");

        if (routeData && routeData.children.length === 0) {
          routeData.children.push(...route);
          this.$router.addRoutes([routeData]);
        }
      });
    },
    onDialog() {
      EventBus.$off("pageDialog");
      EventBus.$on("pageDialog", (data) => {
        this.field = data.field;
        this.designer = data.designer;
        this.pageVisible = true;
        this.dialogKey += 1;
      });
    },
  },
  beforeDestroy() {
    EventBus.$off("pageDialog");
  },
  mounted() {
    this.onDialog();
    this.dialogKey = 1;
  },
  watch: {
    $route: {
      handler() {
        this.getAllPage();
      },
      deep: true,
      immediate: true,
    },
  },
};
</script>
<style lang="scss">
#app {
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.avue--detail .el-col {
  margin-bottom: 0;
}

.avue-crud {
  //height: 100%;

  .el-card {
    .el-card__body {
      //height: 100%;

      .el-form {
        //height: 100%;

        .el-table {
          //height: 100%;

          .el-button {
            padding: 0;
            font-size: 13px;
          }
        }
      }
    }
  }
}

.el-dialog {
  .el-dialog__header {
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
    padding: 15px 20px;

    .el-dialog__title {
      font-size: 18px;
      line-height: 24px;
    }
  }

  .el-dialog__body {
    padding: 10px 20px;
  }
}

.el-drawer__wrapper {
  .el-drawer__container {
    .el-drawer {
      .el-drawer__header {
        box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
        margin-bottom: 0;
        padding: 12px 20px;
      }

      .el-drawer__body {
        box-sizing: border-box;
        padding: 10px;
      }
    }
  }
}

/*.el-table--small .el-table__cell {
  padding: 6px 0
}*/
</style>
